﻿@model NOSDC.Models.CommentViewModel

	@{
	    var options = new AjaxOptions{
	        UpdateTargetId = "comments",
            InsertionMode = InsertionMode.Replace,
            OnSuccess = "commentPosted"
	    };       
	}

<div id="comments">
    @if(Model.TotalComments > 0){
        <fieldset class="regFormBG" >
            <div style="height:35px;">
                <div class="commentHeader">Comment on this article </div>
                <div class="commentTotal">Showing <span id="currentCount">@Model.Comments.Count</span> / @Model.TotalComments Comments</div>
            </div>
            <div class="clear"></div>
            <div id="posts">
                @for (var i = 0; i < Model.Comments.Count(); i++ )
                {
                    <div class="@(i % 2 == 1 ? "commentLight" : "commentDark")">
                        <div class="commentBy"><strong>@Membership.GetUser(Model.Comments[i].UserID).UserName</strong></div>
                        <div class="commentPosted">@Model.Comments[i].DatePosted.ToString("MMMM d, yyyy, hh:mm:ss")</div>
                        <div class="commentMessage">@Html.Raw(Model.Comments[i].Message)</div>
                    </div>
                }
            </div>
            @if(Model.TotalComments > 10){
                <div class="buttons" style="margin:auto; padding:0; text-align:center; float:none;">
                    <button id="getMore" type="button" class="regular" style="float:none; display:inline"><img src="@Url.Content("~/Images/comment.gif")" alt="" /> Get More Comments</button>
                    <input id="currentPage" type="hidden" value="1" />
                    @Html.HiddenFor(model => model.PostedComment.ArticleID)
                </div>
            }
        </fieldset>
    }
   
  @if (Membership.GetUser() != null)
  {
      <div style="padding-top:15px;">
        <div>
            <div>
                <div class="leftIcon">
                </div>
                <div class="titleWrapper">
                    <div class="newsTitle">Post a comment</div>
                </div>
            </div>
            <div class="rightIcon">
            </div>
          @using (Ajax.BeginForm("PostComment", "Comments", null, options))
          {
                <div class="postBody">
                    @Html.ValidationSummary(true, "Please correct the errors and try again.")
                    <div id="successMessage" style="display:none;text-align:center; color:#529214;font-weight:bold;padding-bottom:5px;">Your comment has been posted.</div>
                    <div id="errorMessage" style="display:none;text-align:center; color:#CD0000;font-weight:bold;padding-bottom:5px;">You must enter a comment!</div>
                    @Html.TextAreaFor(model => model.PostedComment.Message, new { rows = "3", cols = "20", style = "width:99%" })
                    @Html.ValidationMessageFor(model => model.PostedComment.Message)
                    <div style="height:25px;">
                        <div id="maxChars" class="maxChars"> <span id="counter">0 characters</span> of 1000 (max) characters.</div>
                        <div id="postComment" class="buttons" style="float:right;">
                            <button  type="submit" class="regular" name="save"><img src="@Url.Content("~/Images/comment.gif")" alt="" />Post Comment</button>
                        </div>
                    </div>
                </div>
              @Html.HiddenFor(model => model.PostedComment.ArticleID)
              @Html.AntiForgeryToken()
          }
        </div>
    </div>
  }
  else
  { 
      <div style="font-size:16px; font-weight: bold; text-align:center; padding-top:10px; color:#444;">You must login to comment!</div>
  }
    <br />
</div>   